<template>
  <div class="q-pa-md portalOperate" v-if="show">
    <!-- {{ portalType}}{{ personList }}{{customList}} -->
      <t-fab
        v-model="isOpen"
        :icon="!isOpen?'add':'done'"
        direction="left"
        color="accent"
        :disable="draggingFab"
        :persistent="true"
        v-touch-pan.prevent.mouse="moveFab"
        :style="`position: fixed;right:${fabPos[0]}px;bottom:${fabPos[1]}px;z-index:100`"
      >
      <t-fab-action
      v-if="!enablePlan&&showChangePortal&&portalType&&portalType.Type==1||(portalType.Type==0&&!customList&&personList)"
      @click.stop="trigerEvent('changeCurInstance',portalType.ID)"
          color="primary"
           icon="perm_identity"
          :disable="draggingFab"
           :title="$q.lang.portal.switchingPreviteScheme" 
      
     
        >
       
  </t-fab-action>
        <t-fab-action
        v-if="!enablePlan&&showChangePortal&&portalType&&(portalType.Type==2||(portalType.Type==0&&customList&&!personList))"
        @click.stop="trigerEvent('changeCurInstance',portalType.ID)"
          color="primary"
         
          :disable="draggingFab"
          :title="$q.lang.portal.switchingCommonScheme"
        >
        <i class=" icon icon-fasproductmgr" style="font-size: 22px;"></i>
        </t-fab-action>
      <t-fab-action
        @click.stop="trigerEvent('save')"
          color="primary"
          icon="done"
          :disable="draggingFab"
          :title="$q.lang.portal.savePortalInstance"
        />
        <t-fab-action
        v-if="false"
          @click.stop="trigerEvent('add1')"
          color="primary"
          icon=""
          :disable="draggingFab"
          :title="$q.lang.portal.addMetricWidget"
        >
        <i class=" icon icon-t-OPORTAL" style="font-size: 22px;"></i>
        </t-fab-action>
        <t-fab-action
          @click.stop="trigerEvent('add')"
          color="primary"
          icon="add"
          :disable="draggingFab"
         :title="$q.lang.portal.addPortalWidgets"
        />
        
        <t-fab-action
        @click.stop=" trigerEvent('resetPlan')"
          color="primary"
          icon="undo"
          :disable="draggingFab"
          :title="$q.lang.portal.reset"
        />
        <t-fab-action
         v-if="!enablePlan&&(portalType.Type==1&&isMaster)||portalType.Type==2"
        @click.stop="trigerEvent('restoreDefault')"
          color="primary"
          icon="delete"
          :disable="draggingFab"
           :title="$q.lang.portal.delete"
        />
      </t-fab>
     

      
  </div>
</template>
  
  <script>
import { ref,watch } from 'vue';

import { QFabAction as TFabAction,QFab as TFab } from '@teld/q-components/Fab';
export default {
    name: 'FloatActionButton',
    emits: ['operate','changeStatus'],
    props: {
      showChangePortal: {
            type: Boolean,
            default: false
        },
        portalType: {
            type: Object,
            default: ''
        } ,
        personList:{
          default:null,
          type:[null,Object]
        },
        customList:{
          default:null,
          type:[null,Object]
        },isMaster:Boolean,
        enablePlan:Boolean
    },
    components:{
      TFab,
      TFabAction
    },
  setup(props, { attrs, emit, expose, slots }) {

    const fabPos = ref([18, 18]);
    const draggingFab = ref(false);
    const isOpen = ref(false)
    const trigerEvent=(type,value)=> {
        emit('operate',{
          type,
          value
        })
    }
    watch(()=>isOpen.value,()=>{
      emit('changeStatus',isOpen.value)
    },{
      immediate:true
    })
    expose({
      isOpen
    })
    const show =ref(window.TQuasarBase||props.enablePlan)//ref(true)//
    return {
      fabPos,
      draggingFab,
      isOpen,
      show,
      enablePlan:props.enablePlan,
     trigerEvent,
      moveFab(ev) {
        draggingFab.value = ev.isFirst !== true && ev.isFinal !== true;

        fabPos.value = [
          fabPos.value[0] - ev.delta.x,
          fabPos.value[1] - ev.delta.y,
        ];
      },
    };
  },
};
</script>
  <style lang="scss">
  .portalOperate{
    .bg-accent {
    background-color: var(--t-color) !important;
  }
  .bg-primary{
    background-color: var(--t-color);
  }
  }
  
  
</style>